<!--
* @FileDescription: 采煤工作面-抽采评价
* @Author: yuec621@outlook.com
* @Date: 2025-08-01 13:09:27
* @LastEditors: Please set LastEditors
* @LastEditTime: 2025-08-01 13:09:27
-->
<template>
  <div class="pagestyle">
    <div style="font-size: 18px;
    font-weight: 700;margin-bottom:10px">采煤工作面</div>
    <vxe-grid ref="gridRef" v-bind="state.gridOptions"></vxe-grid>
    <div>
      <el-pagination style="float: right;margin: 0 20px;" v-model:current-page="state.queryObj.pageNum"
        v-model:page-size="state.queryObj.pageSize" :page-sizes="[10, 20, 30, 40]" background
        layout="total, sizes, prev, pager, next, jumper" :total="state.queryObj.total" @size-change="pagechangeSize"
        @current-change="pagechange" />
    </div>
  </div>
</template>
<script setup>
  import {
    onMounted,
    reactive
  } from "vue";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();
  let state = reactive({
    gridOptions: {
      border: true,
      height: 700,
      spanMethod({
        row,
        rowIndex,
        column,
        visibleData
      }) {
        const spanFields = ['name', 'extractionTime']
        const cellValue = row[column.field]
        if (cellValue && spanFields.includes(column.field)) {
          const prevRow = visibleData[rowIndex - 1]
          let nextRow = visibleData[rowIndex + 1]
          if (prevRow && prevRow[column.field] === cellValue) {
            return {
              rowspan: 0,
              colspan: 0
            }
          } else {
            let countRowspan = 1
            while (nextRow && nextRow[column.field] === cellValue) {
              nextRow = visibleData[++countRowspan + rowIndex]
            }
            if (countRowspan > 1) {
              return {
                rowspan: countRowspan,
                colspan: 1
              }
            }
          }
        }
      },
      columns: [{
          type: 'seq',
          width: 70
        },
        {
          field: 'name',
          title: '工作面名称'
        },
        {
          field: 'extractionTime',
          title: '评价开始时间'
        },
        {
          title: '评价详情',
          field: 'group1',
          headerAlign: 'center',
          children: [{
              field: 'realExtractionPure',
              title: '实时抽放标况纯量'
            },
            {
              field: 'realAirExtractionPure',
              title: '实时风排标况纯量'
            },
            {
              field: 'realExtractionRatio',
              title: '实时抽放率'
            }, {
              field: 'realExtractionResult',
              title: '达标结果'
            }, {
              field: 'dayExtractionPure',
              title: '日抽放标况纯量'
            }, {
              field: 'dayAirExtractionPure',
              title: '日时风排标况纯量'
            }, {
              field: 'dayExtractionRatio',
              title: '日时抽放率'
            }, {
              field: 'monthExtractionPure',
              title: '月抽放标况纯量'
            }, {
              field: 'monthAirExtractionPure',
              title: '月风排标况纯量'
            }, {
              field: 'monthExtractionRatio',
              title: '月抽放率'
            }, {
              field: 'allExtractionPure',
              title: '总抽放标况纯量'
            }, {
              field: 'allAirExtractionPure',
              title: '总风排标况纯量'
            },
            {
              field: 'allExtractionRatio',
              title: '总抽放率'
            }
          ]
        }

      ],
      data: []
    },
    queryObj: {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      extractionType: '采煤工作面'
    }
  })

  function getList() {
    axios.post('/realGasFullMine/list', state.queryObj).then(res => {
      state.gridOptions.data = res.data.list
      state.queryObj.total = res.data.total
    })
  }
  // 分页
  function pagechange(val) {
    state.queryObj.pageNum = val
    getList()
  }
  // 分页
  function pagechangeSize(val) {
    state.queryObj.pageNum = 1
    state.queryObj.pageSize = val
    getList()
  }

  onMounted(() => {
    getList()
  });
</script>
<style lang="scss" scoped>
  .pagestyle {
    margin: 0 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);
    padding: 15px 16px;
  }
</style>